<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne" name="sex" value="男" />男
        <input type="radio" id="sexTwo" checked name="sex" value="女" />女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br />
    <table cellspacing="0" border="1" width="600px">
        <thead>
            <tr>
                <td width="20%">
                    <input type="checkbox" class="selectAll">全选
                    <input type="checkbox" class="selectOther">反选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>王八</td>
                <td>男</td>
                <td>45</td>
            </tr>
        </tbody>

    </table>
    <script>
        // 获取到所有的input
        var users = document.querySelectorAll('.user');
        var selectAllDom = document.querySelector('.selectAll')
        // 全选
        selectAllDom.onclick = function () {
            // 自己创建一个变量 将this的值保存起来
            var _this = this;
            users.forEach(function (dom) {
                // 在forEach方法中 修改了this指向到window了
                dom.checked = _this.checked
            })
        }
        // 处理是否需要全选
        users.forEach(function (dom) {
            dom.onclick = function () {
                // 验证是不是所有的input 都被勾选了 如果是 全选选中 否则取消
                //判断是否需要勾选的条件 所有额input的个数与勾选的个数是否相等
                selectAllDom.checked = users.length == document.querySelectorAll('.user:checked').length;
            }
        })
        // 反向
        document.querySelector('.selectOther').onclick = function(){
            users.forEach(function(dom){
                dom.checked = !dom.checked;
            })
        }
    </script>
</body>

</html>